<template>
	<view class="login">
		<view class="content">
			<!-- 頭部logo -->
			<view class="header">
				<image src="/static/logo.png"></image>
			</view>
			<!-- 主體表單 -->
			<view class="main">
				<!-- <wInput v-model="form['accountLogin'].data.account" type="text" maxlength="11" placeholder="用戶名/電話"
					:focus="isFocus"></wInput> -->

				<div class="code">
					<div class="number" @tap="showPopup = true">
						<text style="padding-right: 10rpx;"> +{{ selectValue.tel }}</text>
						<u-icon name="arrow-down-fill" color="#333" size="30"></u-icon>
					</div>
					<input v-model="form['accountLogin'].data.account" type="text" maxlength="11" placeholder="手機號">
					</input>
				</div>
				<wInput v-model="form['accountLogin'].data.password" type="password" maxlength="11" placeholder="密碼">
				</wInput>
			</view>
			<wButton class="wbutton" text="登 錄" :rotate="isRotate" @click="startLogin"></wButton>

			<!-- 其他登錄 -->
			<!-- <view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
			</view> -->

			<!-- 底部信息 -->
			<view class="footer">
				<view @tap='forget'>找回密碼</view>
				<text>|</text>
				<view @tap='register'>註冊賬號</view>
			</view>
		</view>

			<u-popup v-model="showPopup" mode="bottom" width="750" :closeable="closeable" height="100%"
			close-icon-pos="top-right" close-icon-size="35">
			<index-list :isBigData="enableBigData" @select-item="selectHandler"></index-list>
		</u-popup>

		<!-- <u-action-sheet :list="list" @click="click" v-model="showPopup"></u-action-sheet> -->
		<!-- <u-select v-model="showPopup" :list="list" @confirm="confirm"></u-select> -->

	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	/**
	 * 登錄提示頁
	 */
	import FormValidate from "@/shopro/validate/form";
	import schema from "@/uview-ui/libs/util/async-validator";
	import wechat from "@/shopro/wechat/wechat";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	// #ifdef APP-PLUS
	import apple from "@/shopro/apple";
	// #endif
	import IndexList from "@/components/index-list/index";

	export default {
		data() {
			return {
				//香港，新加坡，澳洲，美国，加拿大，台湾，
				//日本，韩国，越南，马来西亚，英国，德国，法国，荷兰
				list: [{
						value: '86',
						label: '中国 +86'
					}, {
						value: '852',
						label: '香港 +852'
					}, {
						value: '65',
						label: '新加坡 +65'
					},
					{
						value: '61',
						label: '澳洲 +61'
					},
					{
						value: '1',
						label: '美国 +1'
					},
					{
						value: '853',
						label: '加拿大 +853'
					}, {
						value: '886',
						label: '台湾 +886'
					}, {
						value: '81',
						label: '日本 +81'
					}, {
						value: '82',
						label: '韩国 +82'
					},
					{
						value: '84',
						label: '越南 +84'
					},
					{
						value: '60',
						label: '马来西亚 +60'
					},
					{
						value: '44',
						label: '英国 +44'
					},
					{
						value: '49',
						label: '德国 +49'
					},
					{
						value: '33',
						label: '法国 +33'
					},
					{
						value: '31',
						label: '荷兰 +31'
					}
				],
				closeable: true,
				enableBigData: false,
				showPopup: false,
				selectValue: {
					tel: "86",
				},
				platform: this.$platform.get(),
				device: this.$platform.device(),
				form: {
					// 1.帳號密碼登錄
					accountLogin: {
						data: {
							account: "", // 帳號
							password: "" // 密碼
						},
						rules: {
							account: FormValidate.account,
							password: FormValidate.password
						},
						error: {
							account: "",
							password: ""
						}
					},
				},
				//logo圖片 base64
				logoImage: '',
				phoneData: '', //用戶/電話
				passData: '', //密碼
				isRotate: false, //是否加載旋轉
				isFocus: true // 是否聚焦
			};
		},
		components: {
			wInput,
			wButton,
			IndexList
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
			showAuth: {
				get() {
					return !!this.authType;
				},
				set(value) {
					value ? uni.hideTabBar() : uni.showTabBar();
				}
			}
		},
		mounted() {
			_this = this;
			//this.isLogin();
			// uni.showModal({
			// 	title:'登录'
			// })
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			confirm(e) {
				this.selectValue.tel = e[0].value
				console.log(e)
			},
			selectHandler(e) {
				console.log(e, '---ee');
				this.showPopup = false;
				this.selectValue = e;
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			// isLogin() {
			//判斷緩存中是否登錄過，直接登錄
			// try {
			// 	const value = uni.getStorageSync('setUserData');
			// 	if (value) {
			// 		//有登錄信息
			// 		console.log("已登錄用戶：",value);
			// 		_this.$store.dispatch("setUserData",value); //存入狀態
			// 		uni.reLaunch({
			// 			url: '../../../pages/index',
			// 		});
			// 	}
			// } catch (e) {
			// 	// error
			// }
			// },
			startLogin(e) {
				console.log(e)
				//登錄
				if (this.isRotate) {
					//判斷是否加載中，避免重復點擊請求
					return false;
				}
				if (this.form["accountLogin"].data.account.length == "") {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '用戶名不能為空'
					});
					return;
				}
				if (this.form["accountLogin"].data.password.length < 5) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密碼不正確'
					});
					return;
				}

				this.$http(
						"user.accountLogin", {
							area_code:this.selectValue.tel,
							account: this.form["accountLogin"].data.account,
							password: this.form["accountLogin"].data.password
						},
						"登錄中..."
					)
					.then(res => {
						if (res.code === 1) {
							// that.closeAuthModal();
							console.log("登錄成功")
							// uni.switchTab({
							// 	url: '/pages/index/user'
							// })
							
							uni.navigateTo({
								url:'/pages/index/user'
							})
							this.getUserInfo(res.data.token);
							this.$u.toast(res.msg);
						}
					});



				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
				// uni.showLoading({
				// 	title: '登錄中'
				// });
				// getLogin()
				// .then(res => {
				// 	//console.log(res)
				// 	//簡單驗證下登錄（不安全）
				// 	if(_this.phoneData==res.data.username && _this.passData==res.data.password){
				// 		let userdata={
				// 			"username":res.data.username,
				// 			"nickname":res.data.nickname,
				// 			"accesstoken":res.data.accesstoken,
				// 		} //保存用戶信息和accesstoken
				// 		_this.$store.dispatch("setUserData",userdata); //存入狀態
				// 		try {
				// 			uni.setStorageSync('setUserData', userdata); //存入緩存
				// 		} catch (e) {
				// 			// error
				// 		}
				// 		uni.showToast({
				// 			icon: 'success',
				// 			position: 'bottom',
				// 			title: '登錄成功'
				// 		});
				// 		uni.reLaunch({
				// 			url: '../../../pages/index',
				// 		});
				// 	}else{
				// 		_this.passData=""
				// 		uni.showToast({
				// 			icon: 'error',
				// 			position: 'bottom',
				// 			title: '賬號或密碼錯誤，賬號admin密碼admin'
				// 		});
				// 	}
				// 	uni.hideLoading();
				// }).catch(err => {
				// 	uni.hideLoading();
				// })

			},
			login_weixin() {
				//微信登錄
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			},
			login_weibo() {
				//微博登錄
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			},
			login_github() {
				//github登錄
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '...'
				});
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.code {
		margin-bottom: 20px;
		margin-top: 30rpx;
		margin-left: 5px;
		display: flex;
		align-items: center;
		height: 63px;
		background-color: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
		color: grey;
		/* background-color: #f8f8f8; */
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 31px 0 rgba(43, 86, 112, .1);
		box-shadow: 0 0 31px 0 rgba(43, 86, 112, .1);
		// border-bottom: 1rpx solid #999;

		.number {
			padding: 0 10rpx;
			border-right: 1px solid #f8f8f8;
			margin-right: 5px;
			// border-radius: 20px;

		}
	}
</style>